<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="${resourceBase}/lib/H-ui/static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${resourceBase}/lib/H-ui/static/h-ui/css/style.css" rel="stylesheet" type="text/css" />
<link href="${resourceBase}/lib/H-ui/lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="${resourceBase}/lib/H-ui/lib/bootstrap-Switch/bootstrapSwitch.css" rel="stylesheet" type="text/css" />
<link href="${resourceBase}/lib/H-ui/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="${resourceBase}/lib/H-ui/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${resourceBase}/lib/H-ui/lib/layer/1.9.3/layer.js"></script> 
<script type="text/javascript" src="${resourceBase}/lib/H-ui/lib/laypage/1.2/laypage.js"></script> 
<script type="text/javascript" src="${resourceBase}/lib/H-ui/lib/My97DatePicker/WdatePicker.js"></script> 
<script type="text/javascript" src="${resourceBase}/lib/H-ui/lib/icheck/jquery.icheck.min.js"></script> 
<script type="text/javascript" src="${resourceBase}/lib/H-ui/lib/bootstrap-Switch/bootstrapSwitch.js"></script> 
<script type="text/javascript" src="${resourceBase}/lib/H-ui/lib/Validform/5.3.2/Validform.min.js"></script> 
<script type="text/javascript" src="${resourceBase}/lib/H-ui/lib/Validform/5.3.2/passwordStrength-min.js"></script> 
<script type="text/javascript" src="${resourceBase}/lib/H-ui/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${resourceBase}/lib/H-ui/lib/bootstrap-modal/2.2.4/bootstrap-modalmanager.js"></script>
<script type="text/javascript" src="${resourceBase}/lib/H-ui/lib/bootstrap-modal/2.2.4/bootstrap-modal.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->

<title>WorkFlowDemo</title>
<meta name="keywords" content="关键词,5个左右,单个8汉字以内">
<meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">
<script type="text/javascript">
	function popupProcessPicResource(imgSrc) {
		$("#wf-change_process_img").attr("src", "${resourceBase}/images/" + imgSrc.split("/")[1]);
	}
</script>
</head>
<body>
<header class="header">
	<nav class="mainnav Hui-wraper">
		<ul class="cl">
            <li><a href="${base}/viewDeployment">流程一览</a></li>
            <#list userList as user>
                <#if user.role == 1>
                    <li><a href="${base}/viewPersonalRelatedProcessInfo?userId=${user.id}">程序-${user.name}</a></li>
                <#elseif user.role == 2>
                    <li><a href="${base}/viewPersonalRelatedProcessInfo?userId=${user.id}">会计-${user.name}</a></li>
                <#else>
                    <li><a href="${base}/viewPersonalRelatedProcessInfo?userId=${user.id}">经理-${user.name}</a></li>
                </#if>
            </#list>
        </ul>
	</nav>
</header>
<section class="Hui-container">
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> <a href="/" class="c-primary">工作流引擎Demo</a><span class="c-gray en">&gt;</span><a href="#">一览</a><span class="c-gray en">&gt;</span><span class="c-gray">Admin</span></nav>
    <div class="Hui-wraper" style="margin-top: 20px;">
        <div class="panel panel-default">
            <div class="panel-header">工作流Demo：</div>
            <div class="panel-body content">
                <p>此工作流Demo是为了学习工作流而编写的。</p>
                <p>Demo中涉及了5个角色，分别是程序亡牧/程序猴密斯/会计无视/会计光老师/经理苦逼君。</p>
                <p>流程为两个程序可以申请报销费用，如果费用不大于等于500，则此报销交由会计处理，否则交由经理处理，会计可以通过/拒绝/标记审批为异常，通过/拒绝则流程结束，如果标记为异常，则此申请交由经理审批，经理可以通过或者拒绝此申请。</p>
                <p>Demo中会计角色为组任务，其他角色为个人任务，最后查询显示了每个人的待办任务和历史任务。每个角色的角色信息应该在Session中获取，但是本Demo为了简单，把用户id编码在了URL中，通过顶部导航栏来切换不同的角色。</p>
                <p>每种状态的流转可以通过点击下方的部署按钮之后，在部署的流程图中查看。</p>
            </div>
        </div>
    </div>
    <div class="Hui-wraper" style="margin-top: 20px;">
        <form action="${base}/deploy">
            <input class="btn btn-block btn-primary radius" type="submit" value="部署流程（默认部署ReimbursementProcess）">
        </form>
    </div>
    <div class="Hui-wraper" style="margin-top: 20px;">
        <div class="two steps">
            <span class="step">部署总数：${deploymentCount.firstValue}</span>
            <span class="step">流程定义总数：${deploymentCount.secondValue}</span>
        </div>
    </div>
    <#list deploymentList as deployment>
        <div class="Hui-wraper">
    		<h2>
                ${deployment.firstValue.name}
                <small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <small>
                                                版本：${deployment.firstValue.id}&nbsp;&nbsp;&nbsp;&nbsp;部署时间：${deployment.firstValue.deploymentTime?datetime}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <#list deployment.secondValue as resourceName>
                            &nbsp;&nbsp;&nbsp;&nbsp;<small class="btn-link" data-toggle="modal" href="#myModal" onclick="javascript:popupProcessPicResource('${resourceName}')">${resourceName}</small>
                        </#list>
                    </small>
                </small>
            </h2>
    		<div class="line"></div>
    		<table class="table table-border table-bordered table-striped mt-20">
    			<thead>
    				<tr>
    					<th class="col1" style="width: 25%;">流程定义id</th>
    					<th class="col2" style="width: 25%;">流程定义key</th>
    					<th class="col3" style="width: 25%;">流程定义name</th>
                        <th class="col4" style="width: 25%;">流程定义version</th>
    				</tr>
    			</thead>
    			<tbody>
                    <#list deployment.thirdValue as processDefinition>
        				<tr>
        					<th class="col1">${processDefinition.id}</th>
        					<td class="col2">${processDefinition.key}</td>
        					<td class="col3">${processDefinition.name}</td>
                            <td class="col4">${processDefinition.version}</td>
        				</tr>
    				</#list>
    			</tbody>
    		</table>
    	</div>
    </#list>
</section>
<div id="myModal" class="modal hide fade" data-width="1400px" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <img id="wf-change_process_img" alt="您的浏览器不支持" src="${resourceBase}/images/ReimbursementProcess.png" style="width: 1300px; height: 700px;">
    </div>
</div>
<footer class="footer">
</footer>
<script>
	$(function() {
		$('.skin-minimal input').iCheck({
			checkboxClass : 'icheckbox-blue',
			radioClass : 'iradio-blue',
			increaseArea : '20%'
		});

		$("#demoform").Validform({
			tiptype : 2
		});
	});
</script>
</body>
</html>